<template>
  <div>
      <div class="comment-card2" v-if="type!=='dynamic'">
        <div class="comment-card2__l">
          <yun-avatar :userId="info.userId" :src="info.userAvatar"></yun-avatar>
        </div>
        <div class="comment-card2__r">
          <div class="header">
            <h6>{{info.userNick}}</h6>
<!--            <p>{{floor}}楼</p>-->
          </div>
          <p class="comment-box">{{info.comment}}</p>
          <div class="footer">
            <h6>{{dateConvert2}}</h6>
            <p>
              <span v-if="totalRecords" @click="showCommentInput=!showCommentInput">回复({{totalRecords}})</span>
              <span @click="showCommentInput=!showCommentInput">回复</span>
<!--              <span>赞{{likeNum}}</span>-->
              <span @click="dataDeleteComment" v-if="this.info.userId ===$store.state.userProfile.userId">删除</span>

            </p>
          </div>
          <transition name="fade" >
            <auto-textarea
              v-if="showCommentInput"
              fontSize="14px"
              minHeight="66px"
              style=" border:1px solid #EFEFEF;width:100%; background-color: #F4F8FA; border-radius:4px;"
              lineHeight="1.5" v-model="commentContent"
              backgroundColor="#fff"

            ></auto-textarea>
          </transition>
          <transition name="fade" >
            <div class="button-box" v-if="showCommentInput">
              <p @click="dataPostComment2">评论</p>
            </div>
          </transition>
          <card3 @listenCommentReget3="dataGetComment" :type="type" :id="id" v-for="(val,index) in commentList" :key="val.commentId" :info="val"></card3>
          <p class="comment-more" @click="clickToGetMore" v-if="currentPage<pages">查看更多</p>

        </div>

      </div>
      <div class="comment-card2-dynamic" v-if="type==='dynamic'">
        <div class="comment-card2__l">
          <yun-avatar :userId="info.userId" :src="info.userAvatar"></yun-avatar>
        </div>
        <div class="comment-card2__r">
          <div class="header">
            <h6>{{info.userNick}}</h6>
<!--            <p>{{floor}}楼</p>-->
          </div>
          <p class="comment-box">{{info.comment}}</p>
          <div class="footer">
            <h6>{{dateConvert2}}</h6>
            <p>
              <span v-if="totalRecords" @click="showCommentInput=!showCommentInput">回复({{totalRecords}})</span>
              <span @click="showCommentInput=!showCommentInput">回复</span>
<!--              <span>赞{{likeNum}}</span>-->
              <span @click="dataDeleteComment" v-if="this.info.userId ===$store.state.userProfile.userId">删除</span>
            </p>
          </div>
          <transition name="fade" >
            <auto-textarea
              v-if="showCommentInput"
              fontSize="14px"
              minHeight="66px"
              style=" border:1px solid #EFEFEF;width:100%; background-color: #F4F8FA; border-radius:4px;"
              lineHeight="1.5" v-model="commentContent"
              backgroundColor="#fff"

            ></auto-textarea>          </transition>
          <transition name="fade" >
            <div class="button-box" v-if="showCommentInput">
              <p @click="dataPostComment2">评论</p>
            </div>
          </transition>
          <card3 @listenCommentReget3="dataGetComment" :type="type" :id="id" v-for="(val,index) in commentList" :key="val.commentId" :info="val"></card3>
          <p class="comment-more" @click="clickToGetMore" v-if="currentPage<pages">查看更多</p>

        </div>

      </div>
  </div>

</template>


<script>
  import {dateConvert} from "../../../action/utils/dataConvert";
  import Card3 from './commentCard3'
  import config from '../../../action/config'
  import AutoTextarea from "../../common/auto-textarea/src/main";

  export default {
    name:'commentCard',
    components:{
      Card3,AutoTextarea
    },
    props:{
      info:{
        type:Object,
        default:()=>({})
      },
      id:{
        type:[String,Number],
        default:''
      },
      type:String
    },


    computed:{
      dateConvert2(){
        return dateConvert(this.info.createTime)
      }

    },
    data(){

      //return
      return {
        commentList:[],
        showCommentInput:false,
        commentContent:'',
        floor:'',
        likeNum:'',
        currentPage:1,
        pages:1,
        totalRecords:0,
      }
    },

    created(){
      this.dataGetComment();
    },
    watch:{
      currentPage(){
        this.dataGetComment()
      }
    },

    methods:{

      dataPostComment2(){
        if(!this.$store.state.auth.token){
          this.$message({
            type:'warning',
            message:'请在登录后评论!'
          });
          return false;
        }
        if(!this.commentContent){
          this.$message({
            type:'warning',
            message:'请输入评论内容!'
          });
          return false;
        }
        this.currentPage = 1;

        let url;
        let postData = {
          comment:this.commentContent,
        };

        if(this.type === 'blog'){
          url = config.api.post.BlogComment.release+this.id.toString()+'/comment';
          postData.parentId = this.info.commentId;
        }
        if(this.type === 'project'){
          url = config.api.post.ProjectComment.release+this.id.toString()+'/comment';
          postData.parentId = this.info.commentId;
        }
        if(this.type === 'dynamic'){
          url = config.api.post.PostComment.release+this.id.toString()+'/comment';
          postData.parentId = this.info.commentId;
        }
        if(this.type === 'question'){
          url = config.api.post.QuestionReplyComment.release+this.info.replyId.toString()+'/comment';
          postData.parentId = this.info.commentId;
        }

        this.$axios.$post(url,postData).then((response)=>{
          if(response.code===0){
            this.commentContent='';
            this.showCommentInput=false;

            this.dataGetComment();
            this.$message({
              type:'success',
              message:'评论发表成功!'
            })
          }else{
            this.$message({
              type:'warning',
              message:'评论发表失败!'
            })
          }


        })
      },

      dataGetComment(){
        if(!this.id){
          return false
        }
        let url;
        let params = {
          page:this.currentPage,
          size:6
        }
        if(this.type === 'blog'){
          url = config.api.get.BlogComment.list+this.id.toString()+'/comments';
          params.parent_id = this.info.commentId;
        }
        if(this.type === 'project'){
          url = config.api.get.ProjectComment.list+this.id.toString()+'/comments';
          params.parentId = this.info.commentId;

        }
        if(this.type === 'dynamic'){
          url = config.api.get.PostComment.list+this.id.toString()+'/comments';
          params.parent_id = this.info.commentId;
        }

        if(this.type === 'question'){
          url = config.api.get.QuestionReplyComment.list+this.info.replyId+'/comments';
          params.parentId = this.info.commentId;

        }
        this.$axios.$get(url,{
          params
        }).then((response)=>{
          if(response.code===0){
            if(this.currentPage===1){
              this.commentList = response.data.dataList;
              this.pages  = response.data.totalPage;
              this.totalRecords = response.data.totalRecords;
            }else{
              let list = response.data.dataList;
              for(let i = 0;i<list.length;i++){
                this.commentList.push(list[i]);
              }
              this.pages  = response.data.totalPage;
              this.totalRecords = response.data.totalRecords;
            }
          }
        })
      },

      dataDeleteComment(){
        if(!this.$store.state.auth.token){
          this.$message({
            type:'warning',
            message:'请在登录后操作!'
          });
          return false;
        }
        let url;
        if(this.type === 'blog'){
          url = config.api.delete.BlogComment.delete+this.info.commentId.toString()
        }
        if(this.type === 'project'){
          url = config.api.delete.ProjectComment.delete+this.info.commentId.toString()
        }
        if(this.type === 'dynamic'){
          url = config.api.delete.PostComment.delete+this.info.commentId
        }
        if(this.type === 'question'){
          url = config.api.delete.QuestionReplyComment.delete+ this.info.commentId.toString();
        }

        this.$axios.$delete(url).then((response)=>{
          if(response.code===0){
            this.$message({
              type:'success',
              message:'删除成功!'
            });
            this.$emit(config.event.listenCommentReget2,1)
          }else{
            this.$message({
              type:'warning',
              message:'删除失败!'
            });
          }
        })
      },

      clickToGetMore(){
        if(this.currentPage<this.pages){
          this.currentPage = this.currentPage+1;
        }else{

        }
      }

    }

  }

</script>




<style lang="scss" scoped>
  .comment-card2{
    box-sizing:content-box;
    padding:20*$length;
    width:778*$length;
    border-bottom:1px dashed #e5e5e5;
    @extend %flex-row-spb;
    align-items: flex-start;
    border-radius: 4*$length;
    background-color: #F4F8FA;
    .comment-card2__l{
      width:48*$length;
    }
    .comment-card2__r{
      width:714*$length;
      .header{
        @extend %flex-row-spb;
        h6{
          @include fontStyle(14,19,500,#666,left)
        }
        p{
          @include fontStyle(12,16,500,#999,left)
        }
      }

      .comment-box{
        margin-top:15*$length;
        @include fontStyle(14,24,500,#333,left);
        height:auto;
      }

      .footer{
        margin:12*$length 0;
        @extend %flex-row-spb;

        h6{
          @include fontStyle(12,16,500,#999,start)
        }
        p{
          @include fontStyle(12,16,500,#999,start);
          span{
            margin-left:20*$length;
            @extend %cursorPointer;
            @extend %animate-transition;
            &:hover{
              color:#00AAE6;
            }

          }
        }
      }
    }
  }

  .comment-card2-dynamic{
    margin-left:-30*$length;
    box-sizing:content-box;
    padding:20*$length;
    width:700*$length;
    border-bottom:1px dashed #e5e5e5;
    @extend %flex-row-spb;
    align-items: flex-start;
    border-radius: 4*$length;
    background-color: #F4F8FA;
    .comment-card2__l{
      width:48*$length;
    }
    .comment-card2__r{
      width:630*$length;
      .header{
        @extend %flex-row-spb;
        h6{
          @include fontStyle(14,19,500,#666,left)
        }
        p{
          @include fontStyle(12,16,500,#999,left)
        }
      }

      .comment-box{
        margin-top:15*$length;
        @include fontStyle(14,24,500,#333,left);
        height:auto;
      }

      .footer{
        margin:12*$length 0;
        @extend %flex-row-spb;

        h6{
          @include fontStyle(12,16,500,#999,start)
        }
        p{
          @include fontStyle(12,16,500,#999,start);
          span{
            margin-left:20*$length;
            @extend %cursorPointer;
            @extend %animate-transition;
            &:hover{
              color:#00AAE6;
            }

          }
        }
      }
    }
  }


  .release-area{
    width:100%;
    padding:14*$length 16*$length;
    background-color: #fff;
    border:1px solid #EFEFEF;
    border-radius:4*$length;
    @include fontStyle(12,22,500,#666666,left);
    height:66*$length;

  }

  .button-box{
    height:34*$length;
    @extend %flex-row-spb;
    justify-content: flex-end;
    margin-top: 16*$length;
    margin-bottom: 16*$length;

    p{
      width:100*$length;
      background-color: #00AAE6;
      border-radius: 4*$length;
      @include fontStyle(12,34,500,#fff,center);
      @extend %cursorPointer;
      @extend %animate-transition;
      &:hover{
        filter: brightness(110%);
      }


    }

  }

  .comment-more{
    @include fontStyle(12,78,500,#A7A7A7,center);
    background-color: #F4F8FA;
    @extend %cursorPointer;
    @extend %animate-transition;
    border-bottom-left-radius: 4*$length;
    border-bottom-right-radius: 4*$length;
    &:hover{
      color:#00AAE6;
    }
  }
</style>
